<template>
	<!-- 产运销一张图 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">本年采剥进度</text></view>
					</template>
					<view class="m-y-10">
						<view class="flex">
							<view class="fw" style="color: #555d6f; font-size: 28rpx">剥离计划</view>
							<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj.blyplan" class="m-l-20" />
							<text class="unit">万吨</text>
						</view>
						<u-line-progress class="m-y-10" :percentage="((obj.yblcount / obj.blyplan) * 100).toFixed(2)" height="15" activeColor="#4C82FF" />
						<view class="flex m-between">
							<view class="flex">
								<view class="unit">已完成</view>
								<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj.yblcount" class="m-l-5" />
								<text class="unit">万吨</text>
							</view>
							<view class="flex">
								<view class="unit">待完成</view>
								<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj.cbDwc" class="m-l-5" />
								<text class="unit">万吨</text>
							</view>
						</view>
					</view>

					<view class="m-y-10">
						<view class="flex">
							<view class="fw" style="color: #555d6f; font-size: 28rpx">采煤计划</view>
							<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj.coalyplan" class="m-l-20" />
							<text class="unit">万吨</text>
						</view>
						<u-line-progress class="m-y-10" :percentage="((obj.ycoalcount / obj.coalyplan) * 100).toFixed(2)" height="15" activeColor="#4C82FF" />
						<view class="flex m-between">
							<view class="flex">
								<view class="unit">已完成</view>
								<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj.ycoalcount" class="m-l-5" />
								<text class="unit">万吨</text>
							</view>
							<view class="flex">
								<view class="unit">待完成</view>
								<u-count-to bold fontSize="12" decimals="2" color="#0052D9" :endVal="obj.cmDwc" class="m-l-5" />
								<text class="unit">万吨</text>
							</view>
						</view>
					</view>
				</u-collapse-item>
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">剥离量分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">采煤量分析</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">近10日销售量</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="area" ontouch :opts="opts3" :chartData="chartData3" />
					</view>
				</u-collapse-item>
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">年销售量</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="column" ontouch :opts="opts5" :chartData="chartData5" />
					</view>
				</u-collapse-item>
			</u-collapse>
			<up-back-top :scroll-top="scrollTop"></up-back-top>
		</view>
	</view>
</template>

<script setup>
/**************************************返回顶部*************************************************/
const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

/**************************************请求数据逻辑*************************************************/
import { getApiFabric, getByApiCode } from '@/api/customApi';
const showMoreKeys = ref([1, 2, 3, 4]),
	collapse = ref(null);

/**************************************生产情况*************************************************/
let obj = ref({}),
	opts = {
		color: ['#1179E8', '#fdb612'],
		padding: [0, 10, 10, 0],
		enableScroll: true,
		dataLabel: false,
		legend: {
			position: 'top',
			margin: 10
		},
		xAxis: {
			disableGrid: true,
			calibration: true,
			// labelCount: 5,
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万m³',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			area: {
				type: 'curve',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	},
	chartData = ref({}),
	opts2 = {
		...opts,
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万吨',
					titleOffsetY: -10
				}
			]
		}
	},
	chartData2 = ref({});

function fn1() {
	getByApiCode({
		apiCode: 'blYearPlan',
		propertyMapping: {
			blyplan: 'blyplan'
		}
	}).then((res) => {
		obj.value.blyplan = res.data[0].blyplan;
	});
	getByApiCode({
		apiCode: 'coalYearPlan',
		propertyMapping: {
			coalyplan: 'coalyplan'
		}
	}).then((res) => {
		obj.value.coalyplan = res.data[0].coalyplan;
	});
	getByApiCode({
		apiCode: 'yCoalandBl',
		propertyMapping: {
			yblcount: 'yblcount',
			ycoalcount: 'ycoalcount'
		}
	}).then((res) => {
		obj.value.yblcount = res.data[0].yblcount;
		obj.value.ycoalcount = res.data[0].ycoalcount;
	});
	getApiFabric({
		apiCode: 'e84a686c-924b-47b6-b62f-c10b13a69e5b',
		propertyMapping: {
			completeRate: 'completeRate',
			incomplete: 'incomplete'
		}
	}).then((res) => {
		obj.value.cbDwc = res.data[0].incomplete;
	});
	getApiFabric({
		apiCode: 'd5a02aef-c8e9-4236-aa34-2a8fd2d70d9d',
		propertyMapping: {
			completeRate: 'completeRate',
			incomplete: 'incomplete'
		}
	}).then((res) => {
		obj.value.cmDwc = res.data[0].incomplete;
	});

	getApiFabric({
		apiCode: 'd30298d8-301d-4ec6-b316-24417c7bd27a',
		propertyMapping: {
			x: 'x',
			y1: 'y1',
			y2: 'y2'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.y2);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData.value = {
			categories: resData.categories,
			series: [
				{
					name: '实际',
					data: resData.series1
				},
				{
					name: '计划',
					data: resData.series2
				}
			]
		};
	});

	getApiFabric({
		apiCode: '57d5b9c9-b6d8-4c59-acde-564e22a8bfbc',
		propertyMapping: {
			x: 'month',
			y1: 'actual',
			y2: 'plan'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				prev.series2.push(cur.y2);
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData2.value = {
			categories: resData.categories,
			series: [
				{
					name: '实际',
					data: resData.series1
				},
				{
					name: '计划',
					data: resData.series2
				}
			]
		};
	});
}

/**************************************近10日销售量*************************************************/
const opts3 = {
		...opts,
		enableScroll: true,
		dataLabel: false,
		padding: [20, 10, 10, 0],
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			calibration: true,
			labelCount: 5,
			itemCount: 4
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万吨',
					titleOffsetY: -10
				}
			]
		}
	},
	chartData3 = ref({});

function fn2() {
	getByApiCode({
		apiCode: 'shirixiaoshouliang',
		propertyMapping: {
			x: 'sj',
			y1: 'value'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				return prev;
			},
			{
				categories: [],
				series1: []
			}
		);
		chartData3.value = {
			categories: resData.categories,
			series: [
				{
					name: '销售',
					data: resData.series1
				}
			]
		};
	});
}

/**************************************年销售量*************************************************/
const opts5 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [20, 10, 10, 0],
		enableScroll: true,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			calibration: true,
			labelCount: 6,
			itemCount: 5
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: '万吨',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			column: {
				width: 20,
				linearType: 'opacity',
				linearOpacity: 0.5
			}
		}
	},
	chartData5 = ref({});

function fn3() {
	getByApiCode({
		apiCode: 'bennianxiaoshouliang',
		propertyMapping: {
			x: 'riqi',
			y1: 'chanliang'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(cur.y1);
				return prev;
			},
			{
				categories: [],
				series1: []
			}
		);
		chartData5.value = {
			categories: resData.categories,
			series: [
				{
					name: '销售',
					data: resData.series1
				}
			]
		};
	});
}

function getServerData(refresh) {
	Promise.all([fn1(), fn2(), fn3()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style scoped lang="scss"></style>
